<template>
  <div class="content">
    <div class="checkall flex-end">
      <div class="export cp" @click="exportAll">导出</div>
    </div>

    <table class="Datatable">
      <thead>
        <tr>
          <th>
            <input type="checkbox" v-model="checked" v-on:click="checkedAll" />
          </th>
          <th>会议号</th>
          <th>会议开始时间</th>
          <th>会议名称</th>
          <th>发起人</th>
          <th>主持人</th>
          <th>会议类型</th>
          <th>参与人数</th>
          <th>会议密码</th>
          <th>会议记录</th>
          <th>会议文件</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody v-if="total > 0">
        <tr v-for="(item, index) in tableData" :key="index">
          <td>
            <input type="checkbox" v-model="checkboxList" :value="item.cfId" />
          </td>
          <td>{{ item.cfCode }}</td>
          <td>{{ item.cfStartTime?setLocalTime(item.cfStartTime):item.cfStartTime }}</td>
          <td>{{ item.cfName }}</td>
          <td>{{ item.hostName }}</td>
          <td>{{ item.sponsorName }}</td>
          <td>{{ item.cfType }}</td>
          <td>{{ item.personCount }}</td>
          <td>{{ item.cfPassword }}</td>
          <td>{{ item.cfMinutes }}</td>
          <td>{{ item.count }}</td>
          <td>
            <span class="ck cp blue" @click="searchDetail(item.cfId)"
              >查看</span
            >
            <span class="cp blue" @click="exportDocument(item.cfId,item.cfCode)">导出</span>
          </td>
        </tr>
      </tbody>
      <tbody v-else>
        <tr>
          <td colspan="12">暂无数据</td>
        </tr>
      </tbody>
    </table>
    <div class="flex-end">
      <el-pagination
        v-if="total > 0"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 15, 20, 25]"
        :page-size="size"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import getUTCTime from '@/utils/tools/getUTCTime'
import file from '@/utils/tools/fileExport'
export default {
  data () {
    return {
      // currentPage: 1,
      // size: 10,
      checkboxList: [],
      checked: false,
      visible: false
    }
  },
  computed: {
    tableData () {
      return this.$store.state.cfManage.tableData
    },
    total () {
      return this.$store.state.cfManage.total
    },
    currentPage: {
      get: function () {
        return this.$store.state.cfManage.params.page + 1
      },
      set: function (newValue) {
        this.$store.commit('cfManage/set_page', newValue)
      }
    },
    size: {
      get: function () {
        return this.$store.state.cfManage.params.size
      },
      set: function (newValue) {
        this.$store.commit('cfManage/set_size', newValue)
      }
    }
  },
  created () {
    this.$store.dispatch('cfManage/getTableData').then((res) => {
    }).catch(err => {
      this.$message({
        type: 'error',
        message: err,
        duration: 1000
      })
    })
  },
  methods: {
    handleCurrentChange (val) {
      // this.checked = false
      this.$store.commit('cfManage/set_page', val)
      this.$store.dispatch('cfManage/getTableData')
    },
    handleSizeChange (size) {
      // this.checked = false
      this.$store.commit('cfManage/set_size', size)
      this.$store.dispatch('cfManage/getTableData')
    },
    setLocalTime (time) {
      return this.$moment(+new Date(time) + this.tools.getTimeOffset() * 60000).format('YYYY-MM-DD HH:mm:ss')
    },
    checkedAll () {
      // console.log(this.checked)
      if (this.checked) {
        // 实现反选
        this.checkboxList = []
      } else {
        // 实现全选
        this.checkboxList = []
        this.tableData.forEach((item) => {
          this.checkboxList.push(item.cfId)
        })
      }
    },
    exportAll () {
      if (this.checkboxList.length !== 0) {
        const cfIds = this.checkboxList.join(',')
        const timeZone = -getUTCTime.getUTCTime(new Date())
        this.$store.dispatch('cfManage/exportDocumentData', { cfIds, timeZone }).then(res => {
          // console.log(res)
          file.fileExport(res.data, '会议文档')
        })
      } else {
        this.$message({
          type: 'error',
          message: '请先勾选',
          duration: 1000
        })
      }
    },

    searchDetail (id) {
      sessionStorage.setItem('cfid', id)
      this.$router.push({
        path: '/cfManagedetail'
      })
    },
    exportDocument (id, cfCode) {
      const timeZone = -getUTCTime.getUTCTime(new Date())
      this.$store.dispatch('cfManage/exportDocumentData', { cfIds: id, timeZone }).then(res => {
        // const url = window.URL.createObjectURL(res.data)
        // const filename = `${cfCode}会议文档`
        // const a = document.createElement('a')
        // a.href = url
        // a.download = filename
        // a.click()
        // window.URL.revokeObjectURL(url)
        const name = `${cfCode}会议文档`
        // console.log(res.data)
        file.fileExport(res.data, name)
      })
    }
  },
  watch: {
    // 深度 watcher
    checkboxList: {
      handler: function (val, oldVal) {
        if (this.checkboxList.length === this.tableData.length && this.checkboxList.length !== 0) {
          this.checked = true
        } else {
          this.checked = false
        }
      },
      deep: true
    },
    tableData: {
      handler: function (val, oldVal) {
        this.checked = false
        this.checkboxList = []
      },
      deep: true
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  min-height: 674px;
  padding: 0 24px;
  background-color: #fff;
  padding-top: 1px;
  margin-top: 20px;
  border-radius: 8px;
  position: relative;
  padding-bottom: 120px;

  table {
    //   width: 100%;
    // border-collapse: collapse;
    // table-layout: fixed;
    th,
    td {
      // border: 1px solid #e6e9f0;
      // text-align: center;
      // height: 60px;
      // line-height: 60px;
      // color: #3d4966;
      // white-space: nowrap;
      // overflow: hidden;
      // text-overflow: ellipsis;
      &:nth-child(1) {
        width: 60px;
      }
      &:nth-child(2) {
        width: 103px;
      }
      &:nth-child(3) {
        width: 183px;
      }
      &:nth-child(4) {
        width: 214px;
      }
      &:nth-child(5) {
        width: 110px;
      }
      &:nth-child(6) {
        width: 110px;
      }
      &:nth-child(7) {
        width: 110px;
      }
      &:nth-child(8) {
        width: 110px;
      }
      &:nth-child(9) {
        width: 110px;
      }
      &:nth-child(10) {
        width: 110px;
      }
      &:nth-child(11) {
        width: 110px;
      }
    }

    // thead {
    //   tr {
    //     background-color: #f7f9fc;
    //     color: #1f2e4d;
    //   }
    // }
    // tbody {
    //   tr:hover {
    //     background-color: #f7f9fc;
    //   }
    // }
  }
  .ck {
    margin-right: 30px;
  }
}
</style>
